<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="设置记录"
    width="1300px"
    top="3vh"
    @close="logClose"
  >
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="dialogEditDates = true">
        设 置
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        label="ID"
        prop="ServiceDateID"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="设置时间"
        prop="addTime"
        show-overflow-tooltip
      />

      <el-table-column align="center" label="类型" show-overflow-tooltip>
        <template #default="{ row }">
          <div v-if="row.DateType == -1">暂停</div>
          <div v-if="row.DateType == 0">正常</div>
          <div v-if="row.DateType == 1">延期</div>
          <div v-if="row.DateType == 2">恢复</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="备注"
        prop="Memo"
        show-overflow-tooltip
      />

      <el-table-column align="center" label="期限" show-overflow-tooltip>
        <template #default="{ row }">
          {{ row.StartDate }} 至 {{ row.EndDate }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="设置人"
        prop="ActStaffName"
        show-overflow-tooltip
      />
    </el-table>
  </el-dialog>
  <el-dialog
    v-model="dialogEditDates"
    title="设置"
    width="500px"
    @close="editDatesClose"
  >
    <el-form ref="flowFormRef" v-model="backForm" :rules="rules">
      <el-form-item label="选择日期类型" style="margin-top: 20px">
        <el-select v-model="DateType" placeholder="Select" style="width: 100%">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="设置实际服务期限"
        style="width: 380px; margin-top: 20px"
      >
        <DateSelect ref="DateSelectRef" @get-date="getDate" />

        <!-- <el-date-picker
          v-model="SeviceDates"
          type="daterange"
          unlink-panels
          start-placeholder="服务开始日期"
          end-placeholder="服务结束日期"
        /> -->
      </el-form-item>
      <el-form-item label="原因备注" style="margin-top: 20px">
        <el-input v-model="Memo" />
      </el-form-item>
      <el-form-item label="附件" style="margin-top: 20px">
        <!-- 添加时上传附件 -->
        <el-upload
          :file-list="ServiceDateFiles"
          :multiple="true"
          action="https://api.sanjianke.com/common/Upload/upload?file=OrderServiceDate&type=image"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
        <template #footer>
          <div class="dialog-footer">
            <!-- <el-button @click="noUpFiles">清除</el-button> -->
            <el-button type="primary" @click="dialogOrderAttach = false">
              确定
            </el-button>
          </div>
        </template>
        <el-dialog v-model="dialogVisible" top="3vh">
          <img
            w-full
            :src="dialogImageUrl"
            alt="Preview Image"
            style="width: 100%"
          />
        </el-dialog>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="editDatesClose">取 消</el-button>
      <el-button type="primary" @click="receiveTask">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { saveServiceDate, ServiceDateList } from '@/api/storeOperate'
  import DateSelect from '/src/components/DateSelect.vue'
  export default defineComponent({
    name: 'Back',
    components: { DateSelect },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        dialogImageUrl: '',
        dialogVisible: false,
        Memo: '',
        ServiceDateFiles: [],
        DateType: 0,
        typeList: [
          { label: '正常', value: 0 },
          // { label: '延期', value: 1 },
        ],
        DateSelectRef: null,
        SeviceDates: '',
        WorktaskInfo: {},
        dialogFormVisible: false,
        formRef: null,
        list: [],
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogEditDates: false,
      })

      const showEdit = (WorktaskInfo, SeviceDates) => {
        state.SeviceDates = SeviceDates
        state.WorktaskInfo = WorktaskInfo
        state.dialogFormVisible = true
        getList()
      }
      const close = () => {
        state['formRef'].resetFields()
        state.dialogFormVisible = false
      }

      const receiveTask = async () => {
        console.log(state.SeviceDates, '123123')
        const dataMsg = {
          OrderID: state.WorktaskInfo.OrderID,
          OrderListID: state.WorktaskInfo.OrderListID,
          SeviceDates: state.SeviceDates,
          DateType: state.DateType,
          Memo: state.Memo,
          ServiceDateFiles: state.ServiceDateFiles,
        }
        const { msg } = await saveServiceDate(dataMsg)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        state.dialogEditDates = false
        state.DateSelectRef.empty()
        getList()
      }

      const logClose = () => {
        emit('fetch-data')
        state.dialogFormVisible = false
      }
      const editDatesClose = () => {
        state.Memo = ''
        state.ServiceDateFiles = []
        state.dialogEditDates = false
      }
      const getList = async () => {
        const dataMsg = {
          OrderID: state.WorktaskInfo.OrderID,
          OrderListID: state.WorktaskInfo.OrderListID,
        }
        const { data } = await ServiceDateList(dataMsg)
        state.list = data
        console.log(data, '2222')
      }

      const getDate = (data) => {
        state.SeviceDates = data
        console.log(data, '子组件传过来的时间数组')
      }

      const handlePictureCardPreview = (uploadFile) => {
        state.dialogImageUrl = uploadFile.url
        state.dialogVisible = true
      }

      const handleRemove = () => {
        // const index = state.PaymentForm.PaymentAttFiles.findIndex(
        //   (fileItem) => {
        //     console.log(fileItem.url, row.url)
        //     return fileItem.url === row.url
        //   }
        // )
        console.log(state.ServiceDateFiles)
        // state.PaymentForm.PaymentAttFiles.splice(index, 1)
      }

      const handleAvatarSuccess = (response) => {
        const data = {
          url: response.data.url,
        }
        state.ServiceDateFiles.push(data)
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
      }

      return {
        ...toRefs(state),
        handleAvatarSuccess,
        handlePictureCardPreview,
        showEdit,
        handleRemove,
        getList,
        receiveTask,
        getDate,
        logClose,
        editDatesClose,
        close,
      }
    },
  })
</script>
